<!-- 分销中心  -->
<template>
  <s-layout class="index-wrap" title="转让/赠送"  onShareAppMessage>
	  <view class="tip ss-flex align-start">
		  <uni-icons type="info" size="20" color="#C97376"></uni-icons>
		  <view class="ss-m-l-20">转让是指将平台奖励的会员转让给他人，让他人购买，从而自己赚钱费用。</view>
		 <!-- <view class="ss-m-l-20">赠送是指将平台奖励的会员送给他人。</view> -->
	  </view>
    <view class="main">
		<view class="block">
			<view class="title">转让/赠送对象信息</view>
			<uni-forms
			  label-width="200"
			  ref="form"
			  :model="state.form"
			  :rules="state.rules"
			  border
			  class="form-box"
			>
			    <uni-forms-item
			      label="姓名:"
			      :required="true"
				  name="name"
			    >
				
			      <uni-easyinput
			        :inputBorder="false"
			        :styles="{ disableColor: '#fff' }"
			        placeholderStyle="color:#BBBBBB;font-size:28rpx;line-height:normal"
			        v-model="state.form.name"
			        placeholder="请输入对方姓名"
			      />
			    </uni-forms-item>
				<uni-forms-item
				  label="电话号码："
				  :required="true"
				  name="name"
				>
				  <uni-easyinput
				    :inputBorder="false"
				    :styles="{ disableColor: '#fff' }"
				    placeholderStyle="color:#BBBBBB;font-size:28rpx;line-height:normal"
				    v-model="state.form.name"
				    placeholder="请输入对方电话号码"
				  />
				  
				</uni-forms-item>
			</uni-forms>
		</view>
		<su-fixed bottom>
			<view class="bg-white ss-p-t-20 ss-p-b-60 ss-flex justify-center">
				<button class="btn ss-reset-button " @tap="submit()">
					确定
				</button>
			</view>
			
		</su-fixed>
		
	</view>
  </s-layout>
</template>

<script setup>
  import sheep from '@/sheep';
  import { onShow } from '@dcloudio/uni-app';
  import { computed, reactive,ref } from 'vue';
  
  const form=ref(null)

  const state = reactive({
    form:{name:''},
	rules:{
		name:{
			rules:[{required: true,errorMessage: '请填写姓名'}]
		}
	}
  });
  
  const list=[
	  {name:'商务BD',txt:'原价398元终身（前5万个名额仅需199元,还剩14003个名额）'},
	  {name:'商务BDM',txt:'原价4980元'},
	  {name:'服务中心(街道)',txt:'原价19800元'},
  ]

 
  function submit(){
	  form.value.validate().then(res=>{
				console.log('表单数据信息：', res);
			}).catch(err =>{
				console.log('表单错误信息：', err);
			})
  }
  onShow(() => {
  });
</script>

<style lang="scss" scoped>
  :deep(.page-main) {
    background-size: 100% 100% !important;
  }
  :deep(.uni-forms-item__content){
	  width:100rpx!important;
	  text-align: right!important;
	  
  }
  .tip{
	  padding:18rpx 24rpx;
	  background:#FBEDED;
	  color:#C97376;
	  line-height: 1.5em;
  }
  .main{
	  padding:25rpx;
	  .btn-txt{
		  font-size: 26rpx;
		  color:#006B86;
		  margin-left:30rpx
	  }
	  .block{
		  margin-top:20rpx;
		  padding:40rpx 30rpx 30rpx;
		  width: 702rpx;
		  border-radius: 20rpx;
		  background:#fff;
		  box-sizing:border-box;
		  .title{
			  font-weight: bold;
			  font-size: 32rpx;
			  color: #323232;
		  }
		  
		 
		  
	  }
	  .btn{
	  			  width: 702rpx;
	  			  height: 80rpx;
	  			  background: #003288;
	  			  border-radius: 49rpx;
	  			  font-size: 32rpx;
	  			  color: #FFFFFF;
	  }
  }
</style>
